<template>
  <div class="border-2 border-gray-100 dark:border-gray-800 my-3 p-3 rounded space-y-1">
    <div class="flex justify-between items-center">
      <div>
        <RemoteImage class="hidden md:block" :src="item.cover" :size="100"></RemoteImage>
      </div>
      <div class="flex-1 flex-col w-full px-3 space-y-5">
        <div class="flex items-center justify-between">
          <h2 @click="handlePost(item.id)" class="cursor-pointer text-blue-600 hover:opacity-80 transition-all dark:text-blue-400 truncate max-w-md">
            {{ item.title }}</h2>
          <n-button text>
              <TextIcon tip="分类" icon="iconamoon:category" :text="item.categoryName" :size="23"></TextIcon>
          </n-button>
        </div>
        <div class="flex justify-between">
          <div class="flex items-center sm:space-x-3">
            <ArrayTag class="hidden sm:block" tip="文章标签" :tags="item.tags"></ArrayTag>
            <TextIcon tip="作者" icon="mdi:user" :text="item.username" :size="16"></TextIcon>
            <div>|</div>
            <DateIcon tip="创作时间" icon="eos-icons:modified-date-outlined" :size="16"
                      :date="item.createdAt" date-format="MM-DD"></DateIcon>
          </div>
          <div class="flex space-x-3">
            <TextIcon tip="浏览" icon="ep:view" :text="String(item.views)" :size="16"></TextIcon>
            <TextIcon tip="评论" icon="ant-design:comment-outlined" :text="String(item.comments)"
                      :size="16"></TextIcon>
          </div>
        </div>
      </div>
    </div>
    <div v-if="openPostPreview" class="h-48 overflow-hidden border-t">
      <n-scrollbar>
        <PreviewMarkdown :id="item.id.toString()" :content="handleContent(item.content)"></PreviewMarkdown>
        <n-button quaternary @click="handlePost(item.id)" v-if="item.content.length>500" block >查看更多</n-button>
      </n-scrollbar>
    </div>
  </div>
</template>

<script setup lang="ts">


import RemoteImage from "@/components/common/image/RemoteImage.vue";
import ArrayTag from "@/components/pc/tag/ArrayTag.vue";
import PreviewMarkdown from "@/components/common/markdown/PreviewMarkdown.vue";
import {PropType} from "vue";
import {storeToRefs} from "pinia";
import {useAppStore} from "@/store/module/app";
import TextIcon from "@/components/pc/icon/TextIcon.vue";
import DateIcon from "@/components/pc/icon/DateIcon.vue";
import router from "@/router";

const {openPostPreview} = storeToRefs(useAppStore())
defineProps({
  item: {
    type: Object as PropType<IPost>,
    default: () => ({})
  }
})
const handlePost =(id:string)=>{
  router.push({
    path:`/pc/post/p/${id}`
  })
}
const handleContent = (content: string) => {
  let res = getPairString(content.slice(0, 500))
  if (res === '') {
    res = getPairString(content.slice(0, 1000))
  }
  return res;
}

const getPairString = (str: string) => {
  const regex = /```/g;
  const matches = str.match(regex);
  if (matches && matches.length % 2 === 1) {
    const lastIndex = str.lastIndexOf('```');
    if (lastIndex !== -1) {
      return str.slice(0, lastIndex);
    }
  }
  return str;
}
</script>

<style scoped>

</style>